<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div data-index="2" data-list-name="andy" getTime="20"></div>

<script>
    /**
     * 自定义属性很容易引起歧义, 不容易判断是元素的内置属性还是自定义属性
     * H5给我们新增了自定义属性:
     * #
     * H5规自定义属性data-开头做为属性名并且赋值
     * 比如 <div data-index="1"></div>
     * 或则使用 JS 设置
     * element.setAttribute('data-index', 2);
     *
     */
    var element = document.querySelector('div');


    console.log(element.getAttribute('getTime'));

    element.setAttribute('data-time', 200);

    /**
     * 获取H5自定义属性
     * 兼容性获取 element.getAttribute('data-index')
     * H5新增 element.dataset.index 或则 element.dataset['index']  IE11才开始支持
     * #
     * 注意: h5新增的获取自定义属性的方法, 它只能获取以data-开头的!!!
     */
    console.log(element.getAttribute('data-index'))
    // h5新增的获取自定义属性的方法
    // readonly dataset: DOMStringMap;  --> dataset是一个集合, 里面存放了所有以data开头的自定义属性
    console.log(element.dataset);       // DOMStringMap {index: "2", time: "200"}
    console.log(element.dataset.index);

    // 如果自定义属性里面有多个 - 连接的单词, 我们获取的时候采取 驼峰命名法
    console.log(`element.dataset.listName: ${element.dataset.listName}`);
    console.log(`element.dataset['listName']: ${element.dataset['listName']}`);


</script>
</body>


</html>
